<template>
  <div class="register">
    <div class="register-wrap">
      <div class="register-top">
        <h2>注册新用户</h2>
        <div>我有账号，去 <router-link to="/login">登录</router-link></div>
      </div>
      <ValidationObserver v-slot="{ handleSubmit }">
        <form class="register-content" @submit.prevent="handleSubmit(onSubmit)">
          <table>
            <tr>
              <td>手机号：</td>
              <td>
                <ValidationProvider
                  tag="div"
                  name="phone"
                  rules="phoneRequired|phone"
                  v-slot="{ errors }"
                >
                  <input
                    type="text"
                    placeholder="请输入你的手机号"
                    v-model="user.phone"
                  />
                  <span class="error-msg">{{ errors[0] }}</span>
                </ValidationProvider>
              </td>
            </tr>
            <tr>
              <td>验证码：</td>
              <td>
                <ValidationProvider
                  tag="div"
                  name="code"
                  rules="codeRequired|code"
                  v-slot="{ errors }"
                >
                  <input
                    type="text"
                    placeholder="请输入验证码"
                    v-model="user.code"
                  />
                  <span class="error-msg">{{ errors[0] }}</span>
                </ValidationProvider>
              </td>
              <td>
                <span v-if="time < 61">{{ time }}秒后重新发送</span>
                <button
                  type="button"
                  class="getCode-btn"
                  @click="getCode"
                  v-else
                >
                  获取验证码
                </button>
              </td>
            </tr>
            <tr>
              <td>登录密码：</td>
              <td>
                <ValidationProvider
                  tag="div"
                  name="code"
                  rules="passwordRequired|password"
                  v-slot="{ errors }"
                >
                  <input
                    type="text"
                    placeholder="请输入你的登录密码"
                    v-model="user.password"
                  />
                  <span class="error-msg">{{ errors[0] }}</span>
                </ValidationProvider>
              </td>
            </tr>
            <tr>
              <td>确认密码：</td>
              <td>
                <ValidationProvider
                  tag="div"
                  name="rePassword"
                  :rules="`rePasswordRequired|rePassword:${user.password}`"
                  v-slot="{ errors }"
                  mode="lazy"
                >
                  <input
                    type="text"
                    placeholder="请输入确认密码"
                    v-model="user.rePassword"
                  />
                  <span class="error-msg">{{ errors[0] }}</span>
                </ValidationProvider>
              </td>
            </tr>
            <tr>
              <td></td>

              <ValidationProvider
                tag="div"
                name="agree"
                rules="agree"
                v-slot="{ errors }"
              >
                <td>
                  <input type="checkbox" v-model="isAgree" />
                  同意协议并注册《尚品汇用户协议》
                </td>
                <span class="error-msg-last">{{ errors[0] }}</span>
              </ValidationProvider>
            </tr>
            <tr>
              <td></td>
              <td><button class="done-btn">完成注册</button></td>
            </tr>
          </table>
        </form>
      </ValidationObserver>
    </div>
    <div class="register-footer">
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>手机尚品汇</li>
        <li>销售联盟</li>
        <li>尚品汇社区</li>
      </ul>
      <p>地址：北京市昌平区宏福科技园综合楼6层</p>
      <p>京ICP备19006430号</p>
    </div>
  </div>
</template>

<script>
import { reqCode, reqRegister } from '@/api/user'
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
import { required } from 'vee-validate/dist/rules'
extend('phoneRequired', {
  ...required,
  message: '请输入手机号',
})
const phoneReg = /^1[3-9][0-9]{9}$/
extend('phone', {
  validate(phone) {
    return phoneReg.test(phone)
  },
  message: '请输合法入手机号',
})
extend('codeRequired', {
  ...required,
  message: '请输入验证码',
})
extend('code', {
  validate(code) {
    const codeReg = /^[0-9]{6}$/
    return codeReg.test(code)
  },
  message: '验证码不符合规范',
})
extend('passwordRequired', {
  ...required,
  message: '请输入密码',
})
extend('password', {
  validate(password) {
    const reg = /^[0-9]{6,18}$/
    return reg.test(password)
  },
  message: '密码不得少于6位',
})
extend('rePasswordRequired', {
  ...required,
  message: '请确认密码',
})
extend('rePassword', {
  validate(rePassword, { password }) {
    return rePassword == password
  },
  params: ['password'],
  message: '密码不一致',
})
extend('agree', {
  validate(agree) {
    return agree
  },
  message: '请同意用户协议',
})
export default {
  name: 'ZRegister',
  components: { ValidationProvider, ValidationObserver },
  data() {
    return {
      user: {
        phone: '',
        code: '',
        password: '',
        rePassword: '',
      },
      isAgree: false,
      time: 61,
    }
  },
  methods: {
    async onSubmit() {
      const res = await reqRegister(this.user)
      console.log(res)
    },
    async getCode() {
      if (!phoneReg.test(this.user.phone)) return
      this.time--
      this.timeId = setInterval(() => {
        this.time--
        if (this.time <= 0) {
          this.time = 61
          clearInterval(this.timeId)
        }
      }, 1000)
      const res = await reqCode(this.user.phone)
      this.user.code = res
    },
  },
}
</script>

<style scoped lang="less">
.error-msg {
  position: absolute;
  top: 43px;
  width: 300px;
  left: 76px;
  color: #e1251b;
}
.error-msg-last {
  position: absolute;
  top: 27px;
  color: #e1251b;
}
tr {
  position: relative;
}
.register-wrap {
  width: 1260px;
  margin: 20px auto 0;
  border: 1px solid #dfdfdf;
  position: relative;
  height: 445px;
}
.register-top {
  background-color: #ececec;
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  padding: 0 20px;
}
.register-top a {
  font-size: 14px;
  color: #e1251b;
  font-weight: bold;
}
.register-top h3 {
  font-size: 20px;
  font-weight: 900;
}
.register-content {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}
.register-content table {
  color: #999;
  font-size: 14px;
  border-collapse: separate;
  border-spacing: 0px 10px;
}
.register-content table tr {
  margin: 15px 0;
  td:first-child {
    text-align: right;
  }
}
.register-content table input[type='text'] {
  width: 270px;
  height: 38px;
  box-sizing: border-box;
  margin: 5px;
  border: 1px solid #999;
  padding: 0 0 0 8px;
}

.done-btn,
.getCode-btn {
  width: 100%;
  height: 38px;
  border: none;
  background-color: #e1251b;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.getCode-btn {
  height: 36px;
  padding: 0 5px;
}
.register-footer {
  width: 1260px;
  margin: 0 auto;
}
.register-footer ul {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
  li {
    border-right: 1px solid #ccc;
    margin-top: 20px;
    padding: 0 20px;
    &:last-child {
      border-right: none;
    }
  }
}
.register-footer p {
  text-align: center;
  line-height: 25px;
}
</style>
